<template>
<div>
<el-card shadow="never">
<el-row :gutter="20">
<el-col :span="8">
    <el-input
        v-model="searchGoods"
        placeholder="请输入内容"
        @keyup.enter="getGoods"
        clearable @clear="getGoods"
    >
    <template #append>
        <el-button :icon="SearchOutlined" @click="getGoods"></el-button>
    </template>
    </el-input>
</el-col>
<el-col :span="4">
    <el-button type="primary" @click="router.push('addgoods')">
        添加商品
    </el-button>
</el-col>
</el-row>
</el-card>

<el-table :data="goodsData" style="width: 100%" stripe>
    <el-table-column type="index" label="#"/>
    <el-table-column prop="goods_name" label="商品名称" />
    <el-table-column prop="goods_price" label="商品价格"  width="150px"/>
    <el-table-column prop="goods_weight" label="商品重量" width="150px"/>
    <el-table-column prop="upd_time" label="创建时间" width="200px">
        <template #default="slot1">
            {{ formatTime(slot1.row.upd_time) }}
        </template>
    </el-table-column>
    <el-table-column label="操作"  width="200px">
        <template #default="slot2">
            <el-button :icon="EditOutlined" type="primary" size="small" >编辑</el-button>
            <el-popconfirm title="是否删除该商品？" @confirm="removeGoods(slot2.row.goods_id)">
            <template #reference>
                <el-button :icon="DeleteOutlined" type="danger" size="small">删除</el-button>
            </template>
            </el-popconfirm>
        </template>
    </el-table-column>
  </el-table>
  <el-pagination
      v-model:currentPage="currentPage"
      v-model:pageSize="pageSize"
      :page-sizes="[10, 20, 30, 40]"
      :size="small"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />

</div>
</template>
<script setup>
import { DeleteOutlined, EditOutlined, SearchOutlined } from '@ant-design/icons-vue';
import {ref,onBeforeMount} from 'vue'
import axios  from '../../axios'
import { ElMessage } from 'element-plus';
import { useRouter } from 'vue-router';
const router=useRouter()
const searchGoods=ref('')
const goodsData=ref([])
const getGoods=async()=>{
    const {data:res} =await axios.get(`goods`,{
        params:{query:searchGoods.value,pagenum:currentPage.value,pagesize:pageSize.value}
    })
    console.log(res)
    if(res.meta.status!==200) return 
    goodsData.value=res.data.goods
    total.value=res.data.total
}
onBeforeMount(() => {
    getGoods()
})

const formatTime=(time)=>{
    // console.log(time);
    let date=new Date(time);
    // console.log(date);
    let s=String(date.getSeconds()).padStart(2,'0')
    // console.log(s);
    let m=String(date.getMinutes()).padStart(2,'0')
    let h=String(date.getHours()).padStart(2,'0')
    let dd=String(date.getDate()).padStart(2,'0')
    let mm=String(date.getMonth()+1).padStart(2,'0')
    let yy=String(date.getFullYear()).padStart(2,'0')
    return `${yy}-${mm}-${dd} ${h}:${m}:${s}`
}

const currentPage=ref(1)
const pageSize=ref(10)
const total=ref(1)
const handleSizeChange=(val)=>{
    console.log(val);
    pageSize.value=val
    getGoods()
}
const handleCurrentChange=(val)=>{
    console.log(val);
    currentPage.value=val
    getGoods()
}
const removeGoods=async(id)=>{
    const {data:res}=await axios.delete(`goods/${id}`)
    if(res.meta.status!==200)return ElMessage.error('删除失败')
    ElMessage.success('删除商品成功')
    getGoods()
}

</script>
<style>
.el-table{
    margin-top: 20px;
}
.el-pagination{
    margin-top: 30px;
}
</style>